$(document).ready(function(){
    $.ajax({
        type: "POST",
        url: webroot + 'products/ajaxView/' + product_id,
        success: function(message) {
            product = jQuery.parseJSON(message);
            /*load product's images*/
            function load_image(){
                $current = $('#product_img_list ul');
                $noimage = product.image.length;
                var i;
                $.each(product.image,function(index,value){
                     $current.append('<li class="product_img_item"><img class="product_img_img" src="'+webroot + value+'" style="width:100%;height:100%"/> </li>');
                });       
            };

            /*load product's name, company and rating*/
            $.fn.stars = function(){
                return $(this).each(function() {
                    $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
                });
            }

            function load_title(){
                return ;
                $('#name').append('<h1 style="margin:0px 0px;font-size:20px">'+product.title+'</h1>');
                $('#company').append('<h2 style="margin:3px 0px;font-size:15px">by <a href="' + product.company_url + '">'+product.company+'</a></h2>');
                $('#rating').append('<p><span class="stars">'+product.rating+'</span></p>');
                $('span.stars').stars();
            }

            /*load product's price */
            function load_others(){
                $('#product_detail_description').html(product.description);
            }

            /*set up for displaying larger current_image on hover */
            function draw_upper_layer($depth){
                $('#product_desc').append('<div class="invisible"> </div>');
                $('#product_img_current').append('<img src="'+webroot+product.image[0]+'" style="width:100%;height:300px"/>');
                $('#image_enlarge').append('<img src="images/products/ipad/front.jpg" style="width: 100%" />');
                $('#image_enlarge').css('max-width',$(window).height()).css('max-height',$(window).height()); 
                $('.invisible').css('background-color','red').fadeTo(0,0).css('z-index',$depth).width($('#product_img_current').width()).height($('#product_img_current').height()).css({position: "relative",top: 0 + "px", left: 0 + "px"});
            };
            $(document).ready(function(){  
                load_image();
                load_title();
                load_others();
                draw_upper_layer(10);
                
                /* effects for image tab*/
                $('.product_img_item').mouseover(function(){
                    $index = $(this).index('.product_img_item');
                    $bg = $('.product_img_img').eq($index).attr('src');
                    $('#product_img_current img').attr('src',$bg);
                    $('#image_enlarge img').attr('src',$bg);
                });
                $('.invisible').mouseout(function(){
                    $('#image_enlarge').addClass('popup');
                });
                $('.invisible').live("mousemove",function(e){
                    $('#image_enlarge').removeClass('popup');
                    $('#image_enlarge').offset({left:e.pageX,top:e.pageY});
                });   
                /*-----------------*/
             });
        }
    });
});
